<template>
  <el-table :data="tableData" style="width: 100%">
    <template v-for="(item, index) in tableConfig" :key="index">
      <template v-if="item.type === 'index'">
        <el-table-column align="center" v-bind="item" />
      </template>
      <template v-else-if="item.type === 'time'">
        <el-table-column align="center" v-bind="item">
          <template #default="{ row: { createTime } }">
            {{ formateDate(createTime) }}
          </template>
        </el-table-column>
      </template>
      <template v-else-if="item.type === 'state'">
        <el-table-column align="center" v-bind="item">
          <template #default="{ row }">
            <slot :name="item.slotname" :state="row.state"></slot>
          </template>
        </el-table-column>
      </template>
      <template v-else-if="item.type === 'progress'">
        <el-table-column align="center" v-bind="item" width="220px">
          <template #default="{ row }">
            <slot :name="item.slotname" :row="row"></slot>
          </template>
        </el-table-column>
      </template>
      <template v-else>
        <el-table-column align="center" v-bind="item"> </el-table-column>
      </template>
    </template>
  </el-table>
</template>

<script setup lang="ts">
import { formateDate } from '@/utils/formatTime'
type IpropsItem = {
  type?: string
  label: string
  prop?: string
  slotname?: string
}
interface Iprops {
  tableConfig: IpropsItem[]
}
let props = defineProps<Iprops>()

const tableData: any = [
  {
    name: '设计新主题',
    createTime: Date.now(),
    updateTime: Date.now(),
    state: 0,
    progress: '50%'
  },
  {
    name: '网站重构设计',
    createTime: Date.now(),
    updateTime: Date.now(),
    state: 1,
    progress: '20%'
  },
  {
    name: '模型设计',
    createTime: Date.now(),
    updateTime: Date.now(),
    state: 0,
    progress: '30%'
  },
  {
    name: '后台管理系统',
    createTime: Date.now(),
    updateTime: Date.now(),
    state: 1,
    progress: '80%'
  },
  {
    name: '前端设计',
    createTime: Date.now(),
    updateTime: Date.now(),
    state: 2,
    progress: '10%'
  },
  {
    name: 'APP改版开发',
    createTime: Date.now(),
    updateTime: Date.now(),
    state: 2,
    progress: '5%'
  },
  {
    name: 'Logo设计',
    createTime: Date.now(),
    updateTime: Date.now(),
    state: 3,
    progress: '100%'
  }
]
</script>

<style lang="scss" scoped></style>
